<template>
  <!-- 缺个公共的引入 -->
  <!--引入 cateGorymenu 传参-->
  <cateGorymenu :latestData="latestData" :districtData="districtData"></cateGorymenu>
  <div class="container container--zone">
    <div class="region region--full">
      <comImg :imgData="imgData"></comImg>
    </div>
  </div>
  <div class="container container--zone" style="margin-top: 15px">
    <div class="region region--full removeLive">
      <tabText :listlinkData="listlinkData" :moreList="moreList" @tabChange="tabChange"></tabText>
      <div>
        <pageHead :titleData="titleData"></pageHead>
      
      <markContent v-if="isContent" :tickerData="tickerData"></markContent>
      
      <marketLine v-if="istext" :lastMarketData="lastMarketData"></marketLine>
      </div>
      <stickys :sticky="sticky"></stickys>
      <!-- <timeTableMk :timeNewsData="timeNewsData" :titleTime="titleTime" v-if="isRegion"></timeTableMk> -->
      <timeTableMk :timeNewsData="timeNewsData1" :titleTime="titleTime1" v-if="isRegion"></timeTableMk>
      
      <subNow :subNowData="subNowData"></subNow>
      <mastPopular :popularData="popularData" v-if="isRegion"></mastPopular>
      
    </div>
    <div class="region region--primary" style="margin-top: 30px">
      <signupNow></signupNow>

      <nationNew :usNewsData="usNewsData"></nationNew>
      <lineChart></lineChart>
      <tickerName :tickerNameData="tickerNameData" v-if="tickerNameData.length > 0"></tickerName>
      <interactiveTools :toolData="toolData" :onMarketTool="onMarketTool"></interactiveTools>
      <tickerName :tickerNameData="tickerNameData" v-if="tickerNameData.length > 0"></tickerName>
      <tickerName :tickerNameData="tickerNameData" v-if="tickerNameData.length > 0"></tickerName>
    </div>
    <div class="region region--aside sticky">
      <div class="sticky__innards" style="position: static">
        <div class="component component--module">
          <div class="column column--full">
            <div class="element element--ad is-loaded">
              <div id="ad-display-ad" class="j-ad" data-google-query-id="CJP6_-CftYYDFU10DwIdMUUjCA">
                <div id="google_ads_iframe_/2/marketwatch.com/latest_news/latest_news_2__container__"
                  style="border: 0pt none">
                  <img src="../../assets/ceAdver.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <adverTiseMent></adverTiseMent>
</template>

<script setup>
import pageHead from "../../components/pageHead/pageHead.vue";
import markContent from "./markContent/markContent.vue";
import cateGorymenu from "@/views/latestNews/cateGorymenu/cateGorymenu.vue"; //头部
import tabText from "../../components/tabText/tabText.vue";
import marketLine from "./marketLine/marketLine.vue";
import { useDataArrays } from "../../api/data";
import timeTableMk from "./timeTableMk/timeTableMk.vue";
import { usemkDataArrays } from "../../api/market";
import subNow from "../home/subNow/subNow.vue";
import mastPopular from "../home/mastPopular/mastPopular.vue";
import signupNow from "./signupNow/signupNow.vue";
import nationNew from "./nationNew/nationNew.vue";
import lineChart from "../../components/lineChart/lineChart.vue";
import tickerName from "./ticketName/tickerName.vue";
import interactiveTools from "./interactiveTools/interactiveTools.vue";
import adverTiseMent from "../home/adverTisement/adverTiseMent.vue";
import comImg from "@/components/comImg/comImg.vue";
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
const imgData = ref("../src/assets/banner.png");
const moreList = reactive([
  "Watchlist",
  "Screener",
  "Stock Screener",
  "After Hours Screener",
  "Premarket Screener",
  "Mutual Funds Screener",
  "Mutual Funds Comparison",
  "Upgrades / Downgrades",
  "Currency Tools",
  "Earnings Calendar",
  "IPO Calendar",
  "Options Calendar",
]);

const popularData = ref([]);
const { subNowData } = useDataArrays();
const { onMarketTool, latestData, districtData } =
  usemkDataArrays();
// 新闻列表
const tickerData = ref([]);
const isContent = ref(false);
function lastContent(tabkey){
  let data = {
    key: tabkey,
  };
  homeRequest
    .getTicketData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(res,'lastContent');
        tickerData.value = res.data;
        isContent.value = true;
      }
    })
    .catch((e) => {});
}
const listlinkData = ref([]);
const isRegion = ref(false);
const istext = ref(false);

import homeRequest from "@/api/home.js";
import { onMounted } from "vue";
let FrontData = ref([]);
let timeNewsData = ref([]);
let timeNewsData1 = ref([]);
let titleTime = ref({
  title: "",
  name: "",
});
let titleTime1 = ref({
  title: "DOW JONES NEWSWIRES",
  name: "The latest headlines from Newswires.",
});
let usNewsData = ref([]);
function frontData(tabkey) {
  //新闻列表
  let data = {
    key: tabkey,
  };
  homeRequest
    .getgroupData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(111);
        console.log(res);
        FrontData.value = res.data;
        if (FrontData.value.djn !== null) {
          // timeNewsData.value = FrontData.value.auto;
          popularData.value = FrontData.value.djn;
        }
        if (FrontData.value.djn !== null) {
          // timeNewsData1.value = FrontData.value.jr;
          usNewsData.value = FrontData.value.djn;
        }
        isRegion.value = true;
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
let mdList = ref([]);
let lastMarketData = ref([]);
const getNewList = (tabkey) => {
  let data = {
    current: 1,
    size: 50,
    isImg: 1,
    key: tabkey,
  };
  homeRequest
    .newsData(data)
    .then((res) => {
      if (res.code == "0") {
        console.log(res);
        mdList.value = res.data.records;
        if (mdList.value.length >= 6) {
          console.log(mdList.value);
          istext.value = true;
          lastMarketData.value = mdList.value.slice(0, 6);
          timeNewsData.value = mdList.value.slice(6, 12);
          timeNewsData1.value = mdList.value.slice(6, 12);
          console.log(lastMarketData.value);
        }
      }
    })
    .catch((e) => { });
};
// 股票接口
const tickerNameData = ref([]);
const getTickList = (tabKey) => {
  let data = {
    key: tabKey, //当前页面
  };
  homeRequest.getTicketData(data).then((res) => {
    tickerNameData.value = res.data;
  });
};
const tabKey = ref("");
onMounted(async () => {
  const data = localStorage.getItem("tabMdData");
  listlinkData.value = JSON.parse(data).markets;
  // 刷新时保持数据
  let name = window.sessionStorage.getItem("titleData");
  if (name) {
    titleData.title = JSON.parse(name).typeName;
    titleData.name1 = titleData.title;
    tabKey.value = JSON.parse(name).typeKey;
  }
  listlinkData.value.forEach((item, index) => {
    if (item.typeName === "Markets") {
      item.path = "/markets";
      titleData.title = item.typeName;
      titleData.name1 = titleData.title;
      tabKey.value = item.typeKey;
    } else if (item.typeName === "Market Data Center") {
      item.path = "/marketsData";
    } else if (item.typeName === "U.S. Markets") {
      item.path = "/market/us";
    } else if (item.typeName === "Canada") {
      item.path = "/market/canada";
    } else if (item.typeName === "Europe & Middle East") {
      item.path = "/market/europe";
    } else if (item.typeName === "Asia") {
      item.path = "/market/asia";
    } else if (item.typeName === "Emerging Markets") {
      item.path = "/market/emerging";
    } else if (item.typeName === "Latin America") {
      item.path = "/market/latin";
    } else if (item.typeName === "Earnings") {
      item.path = "/market/earnings";
    }
  });
  await getNewList(tabKey.value);
  await frontData(tabKey.value);
  await getTickList(tabKey.value);
  await lastContent(tabKey.value)
});
const tabChange = (data) => {
  // 点击Tba切换时存数据
  window.sessionStorage.setItem("titleData", JSON.stringify(data));
  titleData.title = data.typeName;
  titleData.name1 = titleData.title;
  

};
const titleData = reactive({
  title: "Markets",
  link: "Home",
  name: "Markets",
  name1: "",
});
const toolData = reactive({
  h2: "Sign up for Europe Daily newsletter",
  isshow: true,
  cont: "Get top headlines impacting European markets each day.",
});
</script>

<style scoped lang="scss"></style>
